<template>
  <div style="height: 100%">
    <el-container v-if="hasPerm" style="height: 100%;" class="dealBaseHome fundBaseHome">
      <el-header class="app-header">
        <div class="titlebar">
          <div class="titlebar-title">
            <div class="title">
              <div class="tit">
                <el-tooltip placement="bottom">
                  <div slot="content">{{ thisFundName }}</div>
                  <el-button class="tipText" type="text">
                    <p style="width:100%;"> {{ thisFundName }}</p>
                  </el-button>
                </el-tooltip>
              </div>

              <div class="header-msg">
                <div v-for="(item, index) in dataList" :key="index" class="content">
                  <div class="text">
                    <el-tooltip placement="bottom">
                      <div slot="content">
                        <span v-for="info in item.remark" :key="info">
                          {{ info }}<br>
                        </span>
                      </div>
                      <el-button class="tipText" type="text"> {{ item.name }}
                        <i class="el-icon-question" />
                      </el-button>
                    </el-tooltip>
                  </div>
                  <div class="text">{{ item.value }}</div>
                </div>
              </div>
              <!-- 头部菜单-->
              <div class="tab-change fund-tab-change">
                <Internationalization v-show="thisFundName === '国际化'" />
                <!-- <el-radio-group v-show="cur !== 'fund_proposed_info'" v-model="cur" size="small" @change="active">
                  <el-radio-button
                    v-for="(item,index) in menuList"
                    :key="index"
                    :label="item.menuKey"
                    @click.native="changeMiniMenu($event,item.menuKey)"
                  >{{ $t(item.menuName) }}</el-radio-button>
                </el-radio-group> -->
              </div>
              <div class="btns">
                <!-- 关注 -->
                <Focus :source-id="busId" :source-name="thisFundName" focus-type="fund" />
                <backTop />
              </div>
            </div>
          </div>
        </div>
      </el-header>
      <div v-loading="loading" class="page-component__scroll">
        <fullView
          ref="fullView"
          :bus-id="this.$route.query.id"
          bus-type="fund"
          :child-left-menu="menuList"
          :bus-name="dealName"
          :default-active="cur"
          :default-opends="openMenu"
          menu-class="w-240"
        />
      </div>
      <!-- <el-container class="page-component__scroll fundHome">
        <el-main v-loading="loading" class="app-body el-scrollbar__wrap">
          <div v-if="cur === 'fund_process'" class="list-table-main">
            <fundProcess
              :bus-id="this.$route.query.id"
              bus-type="fund"
              :bus-name="thisFundName"
            />
          </div>
          <div v-if="cur.indexOf('fund_preparations') > -1 || cur.indexOf('fund_invest_time') > -1 || cur.indexOf('fund_proposed_info') > -1 " class="list-table-main">
            <fullView
              ref="fullView"
              :bus-id="this.$route.query.id"
              bus-type="fund"
              :child-left-menu="childLeftMenu"
            />
          </div>
          <div v-if="cur === 'fund_clearing'" class="list-table-main" style="height: 100%;">
            <liquidation ref="liquidation" />
          </div>
        </el-main>
      </el-container> -->
    </el-container>
    <not-fund v-else bus-type="fund" :person-charge="personChargeName" />
  </div>
</template>

<script>
// import fundProcess from './fundProcess'
// import liquidation from './liquidation'
import { childMenuList	} from '@/api/system/menu'
import { getKeyInformation } from '@/api/fund/fundBase'
import { moneyFormat } from '@/utils/ruoyi'
import fullView from '@/components/fullView'
import Focus from '@/components/Focus'
import { getConfigKey } from '@/api/system/config'
import { getPermission } from '@/api/system/dealRole/dealRole'
import NotFund from '@/views/error/deal_401.vue'
import { getMenuKeyAndParentMenuKey } from '@/api/system/user'
export default {
  components: {
    NotFund,
    fullView,
    // fundProcess,
    // liquidation,
    Focus
  },
  data() {
    return {
      menuList: [],
      loading: false,
      cur: '',
      childLeftMenu: [],
      dataList: [],
      // 基金名称
      thisFundName: undefined,
      busId: this.$route.query.id,
      hasPerm: true,
      personChargeName: '',
      openMenu: []
    }
  },
  created() {
    this.busId = this.$route.query.id
  },
  mounted: function() {
    this.headLoading()
  },
  methods: {
    changeMiniMenu(el, val) {
      if (el.target.tagName === 'INPUT') return
      this.load(val)
    },
    // 头部数据
    headLoading() {
      this.loading = true
      this.dataList = []
      getKeyInformation(this.$route.query.id).then(response => {
        // 查询基金菜单
        this.getMenuList(response.data.fundStatus)
        // 基金名称
        this.thisFundName = response.data.fundName
        // 浏览器标题
        document.title = response.data.fundName

        this.personChargeName = response.data.personChargeName

        if (response.data.fundStatus === 'NS') {
          this.dataList = []
        } else {
          // 总实缴金额
          var accumulatedPaidMount = response.data.accumulatedPaidMount
          // 总认缴金额
          var subscribedAmount = response.data.subscribedAmount
          // 实际投资金额
          var amountInvestmentFact = response.data.amountInvestmentFact - response.data.collectPrincipal
          // 累计收益
          var accumulatedIncome = response.data.accumulatedIncome
          // 投资金额
          var investmentAmount = response.data.investmentAmount

          var remark1 = [this.$t('所有出资人的认缴总额')]
          var remark2 = [this.$t('所有出资人的实缴总额')]
          var remark3 = [this.$t('投资金额 - 回款本金')]
          var remark4 = [this.$t('基金现金流中'), this.$t('以 "实际现金流", "流入", "收益"'), this.$t('为条件计算出的的总金额')]
          var remark5 = [this.$t('根据现金流自动计算')]
          var remark6 = [this.$t('累计付款金额')]
          const unit = this.$t('金额单位')
          var data = [
            { name: this.$t('认缴总额') + unit, remark: remark1, value: moneyFormat(subscribedAmount, 'w') },
            { name: this.$t('实缴总额') + unit, remark: remark2, value: moneyFormat(accumulatedPaidMount, 'w') },
            { name: this.$t('投资金额') + unit, remark: remark6, value: moneyFormat(investmentAmount, 'w') },
            { name: this.$t('在投金额') + unit, remark: remark3, value: moneyFormat(amountInvestmentFact, 'w') },
            { name: this.$t('累计收益') + unit, remark: remark4, value: moneyFormat(accumulatedIncome, 'w') },
            { name: 'IRR', remark: remark5, value: response.data.latestIrr }
          ]
          this.dataList = data
        }

        this.loading = false
      })
    },
    // 判断加载基金列表版本
    getMenuList(fundStatus) {
      // 查询一下是否存在新版基金的菜单标识
      getMenuKeyAndParentMenuKey('fund_base_list_fund', 'fund_manage').then(response => {
        console.log('response', response)
        if (!this.isEmpty(response.data)) {
          this.getMenuListSub(fundStatus, 'fund_base_list_fund')
        } else {
          this.getMenuListSub(fundStatus, undefined)
        }
      }).catch(() => {
        this.getMenuListSub(fundStatus, undefined)
      })
    },
    // 获取基金菜单
    getMenuListSub(fundStatus, key) {
      var menuKey = key || 'fund_invest'
      var menuK = 'fund_invest_time'
      if (fundStatus === 'CB') {
        menuKey = key || 'fund_prepare'
        menuK = 'fund_process'
      } else if (fundStatus === 'QS') {
        menuKey = key || 'fund_clear'
        menuK = 'fund_clearing'
      } else if (fundStatus === 'NS') {
        menuKey = key || 'fund_proposed'
        menuK = 'fund_proposed_info'
      }

      // 菜单列表
      childMenuList(menuKey).then(response => {
        // 获取登录人权限
        getPermission(this.busId, 'fund_base', menuKey).then(res => {
          var permissions = JSON.parse(JSON.stringify(this.$store.state.user.permissions))
          console.log(permissions, '前')
          if (res.data && res.data.hasPerm) {
            res.data.notHasPermi.forEach(item => {
              permissions.forEach((p, i) => {
                if (item === p) {
                  permissions.splice(i, 1)
                }
              })
            })

            res.data.hasPerm.forEach(perm => {
              if (perm) {
                permissions.push(perm)
              }
            })
            this.$store.commit('SET_PERMISSIONS', permissions)
            console.log(this.$store.state.user.permissions, '保存的权限')

            this.menuList = res.data.menus
            this.hasPerm = this.menuList.length > 0
          } else {
            this.menuList = response.rows
          }

          this.updateComponentName(this.menuList)
          var isExist = true
          var arr = []
          this.menuList.forEach(v => {
            arr.push(v.id)
            if (v.menuKey === menuK) {
              this.active(v.menuKey)
              this.childLeftMenu = v.children
              isExist = false
            }
          })
          this.openMenu = arr
          // 如果没有进入上面的菜单, 默认进入第一个菜单
          if (isExist) {
            const v = this.menuList[0]
            this.active(v.menuKey)
            this.childLeftMenu = v.children
          }
        })
      })
    },
    // 根据系统变量切换表单配置页面
    async updateComponentName(menuList) {
       var config = {}
       var configId = {}
       config = await getConfigKey('fund_base_form')
       console.log(config, config.data, config.msg, 'config')
       if (config.msg !== 'configForm') {
         return
       }
      configId = await getConfigKey('fundTempletId')
       for (let i = 0; i < menuList.length; i++) {
         const menuItem = menuList[i]
            if (menuItem.component === 'fund/base/fundBaseForm') {
              menuItem.component = 'system/desform/release/onlineTemplate?queryId=' + configId.msg
            }
              if (menuItem.children && menuItem.children.length > 0) {
                this.updateComponentName(menuItem.children)
                }
            }
     },
    // 图表
    active(item) {
      // this.cur = item
      this.load(item)
    },
    loadData(defaultPath) {
      this.$nextTick(() => {
        if (this.$refs.fullView?.importFormPath !== undefined) {
          this.$refs.fullView.importFormPath(defaultPath)
          if (defaultPath) {
            this.$refs.fullView.$refs.asideMenu.activeIndex = ''
          }
        }
      })
    },
    load(val) {
      var defaultPath = ''
      this.menuList.forEach(v => {
        if (v.menuKey === val) {
          this.childLeftMenu = v.children
          this.cur = v.id
          // 默认展示页面
          defaultPath = v.component
        }
      })
      if (val === 'fund_preparations') {
        this.loadData(defaultPath)
        this.$nextTick(() => {
          if (this.$refs?.preparations !== undefined && this.$refs.preparations.$refs.auditChart?.getList !== undefined) {
            this.$refs.preparations.$refs.auditChart.getList()
            if (this.$refs.preparations.$refs.auditChart.chart !== null) {
              this.$refs.preparations.$refs.auditChart.chart.resize()
            }
          }
        })
      } else if (val === 'fund_invest_time' || val === 'fund_clearing') { // 投资期
        this.loadData(defaultPath)
        this.$nextTick(() => {
          var obj = {}
          if (this.$refs?.invest?.$refs !== undefined) {
            for (obj in this.$refs.invest.$refs) {
              if (this.$refs.invest.$refs[obj]?.getList !== undefined) {
                 this.$refs.invest.$refs[obj].getList()
                 if (this.$refs.invest.$refs[obj].chart !== null) {
                   this.$refs.invest.$refs[obj].chart.resize()
                 }
              }
            }
          }
        })
      } else if (val === 'fund_clearing') {
        if (this.$refs.liquidation) {
          this.$refs.liquidation.init()
        }
      } else if (val === 'fund_proposed_info') {
        this.loadData(defaultPath)
      }
    }

  }
}
</script>

<style scoped>
  .imageTitle{
    float: left;
    width: 50px;
    height: 100%;
    margin-right: 20px;
  }
  .fund-header i{
    border: 0px solid;
    border-radius: 0;
    padding: 0px;
    font-size: 1px;
    cursor: pointer;
    position: inherit;
    right: 0px;
    top: 0;
    margin-top: 0;
  }
</style>
